import React from 'react';
import { Avatar, Dropdown, Space } from 'antd';
import type { MenuProps } from 'antd';
import styles from './index.module.less';
import { SearchOutlined, QuestionOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';


function Header(props: any) {
    const items: MenuProps['items'] = [{ label: '肯德基', key: 'kfc' }, { label: '麦当劳', key: 'mdl'}, { type: 'divider'}, { label: '公社食堂', key: 'gsst'}];
    const { collapsed, toggleCollapsed } = props;
    const MenuColapsedIcon = collapsed ? MenuFoldOutlined : MenuUnfoldOutlined;
    return (
        <div className={styles.container}>
            <div className={styles.left} onClick={toggleCollapsed}>
                <MenuColapsedIcon />
            </div>
            <div className={styles.right}>
                <Space>
                    <div className={styles.headerItem}>
                        <SearchOutlined color='#ffffff' />
                    </div>
                    <div className={styles.headerItem}>
                        <QuestionOutlined color='#ffffff' />
                    </div>
                    <div className={styles.headerItem}>
                        <Dropdown menu={{ items }} trigger={['click']}>
                            <div>
                                <Avatar style={{ backgroundColor: '#f56a00', verticalAlign: 'middle' }}  src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                                <span className={styles.name}>chenhaojie</span>
                            </div>
                        </Dropdown>
                    </div>
                </Space>
            </div>
        </div>
    );
}

export default Header;
